<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
</body>
<script>
	const btns = document.querySelectorAll("button");
	{
		// 1
		// for(var i=0;i<btns.length;i++){
		// 	btns[i].onclick = function(){
		// 		console.log(i);
		// 	}
		// }
		// 相当于：
		// var i=0;
		// btns[i].onclick = function(){
		// 	console.log(i);
		// }
		// i++;
		// btns[i].onclick = function(){
		// 	console.log(i);
		// }
		// i++;
		// btns[i].onclick = function(){
		// 	console.log(i);
		// }
		// i++;
		// btns[i].onclick = function(){
		// 	console.log(i);
		// }
		// i++;
	}
	{
		// 2
		// for(var i=0;i<btns.length;i++){
		// 	btns[i].index = i;
		// 	btns[i].onclick = function(){
		// 		console.log(this.index);
		// 	}
		// }
		// 相当于
		// var i=0;
		// btns[i].index = i;
		// btns[i].onclick = function(){
		// 	console.log(this.index);
		// }
		// i++;
		// btns[i].index = i;
		// btns[i].onclick = function(){
		// 	console.log(this.index);
		// }
		// i++;
		// btns[i].index = i;
		// btns[i].onclick = function(){
		// 	console.log(this.index);
		// }
		// i++;
		// btns[i].index = i;
		// btns[i].onclick = function(){
		// 	console.log(this.index);
		// }
		// i++;
		
	}
	{
		// 3
		// for(let i=0;i<btns.length;i++){
		// 	btns[i].onclick = function (){
		// 		console.log(i);
		// 	}
		// }
		
		// 相当于：
		// {
		// 	let i=0;
		// 	btns[i].onclick = function(){
		// 		console.log(i);
		// 	}
		// }
		// {
		// 	let i = 1;
		// 	btns[i].onclick = function(){
		// 		console.log(i);
		// 	}
		// }
		// {
		// 	let i = 2;
		// 	btns[i].onclick = function(){
		// 		console.log(i);
		// 	}
		// }
		// {
		// 	let i = 3;
		// 	btns[i].onclick = function(){
		// 		console.log(i);
		// 	}
		// }
		
	}
	{
		// for(var i=0;i<btns.length;i++){
		// 	btns[i].onclick = (function(i){
		// 		return function(){
		// 			console.log(i);
		// 		}
		// 	})(i);
		// }
		// 相当于：
		var i = 0;
		btns[i].onclick = (function(i){
			return function(){
				console.log(i);
			}
		})(i);
		i++;
		btns[i].onclick = (function(i){
			return function(){
				console.log(i);
			}
		})(i);
		i++;
		btns[i].onclick = (function(i){
			return function(){
				console.log(i);
			}
		})(i);
		i++;
		btns[i].onclick = (function(i){
			return function(){
				console.log(i);
			}
		})(i);
		i++;
	}


	
	

</script>
</html>